<template>
	<div class="addressBook_page layer">
		<van-nav-bar :title="$t('home.addressBook')" left-arrow @click-left="$router.go(-1)" :border="false">
			<template #right v-if="list && list.length > 0">
				<img src="@/assets/images/home/wallet/edit.png" class="edit" @click="edit = !edit" v-if="!edit" />
				<span class="edit_text" v-else @click="edit = !edit">{{$t('complete')}}</span>
			</template>
		</van-nav-bar>
		<div class="list">
			<van-checkbox-group v-model="result" ref="checkboxGroup" checked-color="#0DF5E3" icon-size="16px"
				@change="changeCheckbox">
				<div class="checkbox_flex" v-for="(item,index) in list" :key="index" @click="handleItem(item)">
					<van-checkbox ref="checkboxes" v-if="edit" :name="item.id" />
					<van-cell center :label="item.tag ? `${$t('notes')}：${item.tag}` : ''" :border="false">
						<img :src="item.currency.icon_img" slot="icon" class="icon" />
						<div slot="title">
							<p>{{item.currency_name}}({{item.network_name}})</p>
							<p>{{item.address}}</p>
						</div>
					</van-cell>
				</div>
			</van-checkbox-group>
			<div class="no_data" v-if="list && list.length <= 0">
				<img src="@/assets/images/home/noData.png" class="img" />
				<p>{{$t('home.noData')}}</p>
			</div>
		</div>

		<div class="del_box" v-if="edit">
			<van-checkbox v-model="allCheck" icon-size="16px" checked-color="#0DF5E3"
				@click.stop="clickAll">{{$t('selectAll')}}</van-checkbox>
			<el-button class="submit_but" @click.stop="delAddress">{{$t('del')}}</el-button>
		</div>
		<div class="add_box" v-else>
			<el-button class="submit_but" @click.stop="addAddress">{{$t('newAddress')}}</el-button>
		</div>
	</div>
</template>

<script>
	import SelectNetwork from './components/selectNetwork.vue'
	import {
		userAddresslist,
		userDelAddress
	} from '@/api/my.js'
	export default {
		components: {
			SelectNetwork
		},
		data() {
			return {
				address: '',
				hasNetwork: false,
				edit: false,
				allCheck: false,
				number: '',
				list: [],
				result: [],
			}
		},
		computed: {},
		watch: {
			storeAddress() {
				return this.$store.state.address
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await userAddresslist()
				// console.log('res', res);
				if (res && res.code == 1) {
					this.list = res.data
					if (this.list && this.length <= 0) {
						this.edit = false
					}
				} else {
					this.$toast.fail(res.msg)
				}
			},
			handleAll() {
				// console.log('all');
			},
			changeCheckbox(result) {
				if (result.length === this.list.length) {
					this.allCheck = true
				} else {
					this.allCheck = false
				}
			},
			clickAll() {
				this.allCheck = true
				this.$refs.checkboxGroup.toggleAll(true);
			},
			async delAddress() {
				if (this.result && this.result.length <= 0) {
					this.$t('selectOne')
					return
				}
				const res = await userDelAddress({
					ids: this.result.join(',')
				})
				if (res && res.code == 1) {
					// 删除默认地址
					if (this.storeAddress && this.result.includes(this.storeAddress.id)) {
						this.$store.commit('clickTransferAddress', {})
					}
					await this.getList()
					this.result = []
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
				// console.log('del', this.result);
			},
			addAddress() {
				this.$router.push('/addAddress')
			},
			handleItem(item) {
				if (this.$route.query.id) {
					// console.log('item', item);
					this.$store.commit('clickTransferAddress', item)
					this.$router.go(-1)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.addressBook_page {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		// overflow-y:scroll;

		.list {
			flex: 1;
			min-height: 1px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.checkbox_flex:last-of-type {
				margin-bottom: 120px;
			}
		}

		.edit {
			width: 22px;
			height: 22px;
		}

		.edit_text {
			color: #0DF5E3;
		}

		.checkbox_flex {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			.van-checkbox {
				margin-right: 10px;

				::v-deep .van-checkbox__icon--checked .van-icon {
					color: #333;
				}
			}

			.van-cell {
				flex: 1;
			}
		}

		.van-cell {
			background-color: #3D3D3D;
			border-radius: 16px;
			padding: 13px 20px;
			line-height: 18px;

			&::after {
				// border-bottom: none;
			}

			::v-deep .van-cell__title {
				text-align: left;
				color: #fff;

				.van-cell__label {
					margin-top: 2px;
				}
			}

			.icon {
				width: 26px;
				height: 26px;
				margin-right: 10px;
			}
		}

		.del_box {
			position: fixed;
			bottom: 30px;
			left: 20px;
			width: calc(100% - 40px);
			display: flex;
			justify-content: space-between;
			align-items: center;

			::v-deep .van-checkbox__label {
				color: #fff;
			}

			::v-deep .van-checkbox__icon--checked .van-icon {
				color: #333;
			}

			.submit_but {
				width: 140px;
			}
		}

		.add_box {
			position: fixed;
			width: calc(100% - 40px);
			bottom: 30px;
			left: 20px;
			position: fixed;
			justify-content: center;
			align-items: center;
		}
	}
</style>